<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <style>
        label.required:after { /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }

        .layui-form-label {
            width: 100px;
            height: 50px;
            line-height: 45px;
            padding: 0px;
        }

        .layui-form .layui-input-inline {
            margin-left: 30px;
            width: 290px;
        }

        .main-container .layui-form-item {
            margin: 15px 0px !important;
        }

        .layui-input {
            height: 50px;
        }

        .submit-btn-container .layui-btn, .pear-btn {
            height: 45px;
            width: 130px;
            font-size: 20px;
        }

        .pear-btn i {
            font-size: 20px;
        }

    </style>
</head>
<body>
<div class="main-container">
    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="font-size: 16px;">
        <form class="layui-form" action="">
            <div class="layui-form-item" style="display: none">
                <div class="layui-input-block">
                    <input type="text" name="noticeId" autocomplete="off" th:value="${noticeId}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label required">公告内容</label>
                <div class="layui-input-block">
                    <textarea name="noticeContent" placeholder="请输入内容" th:text="${noticeContent}" lay-verify="content"
                              class="layui-textarea"></textarea>
                    <div style="color: brown;margin-top: 5px;font-size: 14px;">最多只能输入88个字符</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">同步功能</label>
                <div class="layui-input-block">
                    <input type="radio" name="syncFunction" value="0" title="否" checked>
                    <input type="radio" name="syncFunction" value="1" title="是">
                    <div style="color: brown;margin-top: 5px;font-size: 14px;">选择是共享公告内容到其他列</div>
                </div>
            </div>

            <div class="layui-form-item">
                <div style="width: 100%;height: 1px;background: #E9E9E9;"></div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-item submit-btn-container">
                    <div class="layui-input-block"
                         style="display: flex;flex-direction: row;justify-content: center;">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="notice-save">
                            <i class="layui-icon layui-icon-file-b"></i>
                            保存
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary" style="margin-left: 25px">重置
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['dtree', 'form', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;

        form.verify({
            content: function(value, elem) {
                // 自定义规则
                if (value.length === 0) {
                    return '公告内容不能为空';
                }
                if (value.length > 88) {
                    return '不能超过 88 个字符';
                }
            }
        });

        form.on('submit(notice-save)', function (data) {
            let loading = layer.load();
            $.ajax({
                url: '/notice/update/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 1800}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload('notice-table');
                        });
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1800});
                    }
                }
            })
            return false;
        });
    })
</script>
</body>
</html>